
import { useApp } from "@/pinia/modules/app";
import { useRoute } from "vue-router";

export default defineComponent({
  name: "SideBarComponent",  setup() {
    const route = useRoute();
    const { isCollapsed, menus } = storeToRefs(useApp());
    const renderMenuItem = (route) => (
      <el-menu-item
        index={
          route.children && route.children.length === 1
            ? route.children[0].url
            : route.url
        }
      >
        <div class="flex items-center font-[14px">
          {route.children && route.children.length === 1 && (
            <el-icon size="16px">
              <svg-icon iconName={route.icon} />
            </el-icon>
          )}
          {!isCollapsed.value && (
            <span>
              {route.children && route.children.length === 1
                ? route.children[0].title
                : route.title}
            </span>
          )}
        </div>
      </el-menu-item>
    );

    const renderSubMenu = (route) => (
      <el-sub-menu
        index={route.url}
        v-slots={{
          title: () => (
            <div class="flex items-center">
              <el-icon size="16px">
                <svg-icon iconName={route.icon} />
              </el-icon>
              {!isCollapsed.value && <span>{route.title}</span>}
            </div>
          ),
        }}
      >
        {route.children.map((child) =>
          child.children && child.children.length > 0
            ? renderSubMenu(child)
            : renderMenuItem(child)
        )}
      </el-sub-menu>
    );

    return () => (
      <div class="aside-left">
        <el-scrollbar>
          <el-menu
            collapse={isCollapsed.value}
            router
            default-active={route.path}
            unique-opened
          >
            {menus.value.map((route) =>
              route.children.length > 1
                ? renderSubMenu(route)
                : renderMenuItem(route)
            )}
          </el-menu>
        </el-scrollbar>
      </div>
    );
  },
});
